<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="first">
        <el-card class="box-card">
          <ul>
            <li>
              <div class="item">
                <p>
                  <span class="title">姓名</span>
                  <span>{{baseInfo.name}}</span>
                </p>
                <p>
                  <span class="title">手机</span>
                  <span>{{baseInfo.phone}}</span>
                </p>
                <p>
                  <span class="title">身份证号</span>
                  <span>{{baseInfo.idCard}}</span>
                </p>
              </div>
            </li>
            <li>
              <div class="item">
                <p>
                  <span class="title">代理级别</span>
                  <span>{{baseInfo.level}}级</span>
                </p>
                <p>
                  <span class="title">所在城市</span>
                  <span>{{baseInfo.province}}/{{baseInfo.city}}</span>
                </p>
                <p>
                  <span class="title">所在地区</span>
                  <span>{{baseInfo.region}}</span>
                </p>
              </div>
            </li>
            <li>
              <div class="item">
                <p>
                  <span class="title">上月销售额</span>
                  <span>{{baseInfo.lastMonthSales}}元</span>
                </p>
                <p>
                  <span class="title">本年销售额</span>
                  <span>{{baseInfo.thisYearSales}}元</span>
                </p>
                <p>
                  <span class="title">历年销售额</span>
                  <span>{{baseInfo.allYearSales}}万元</span>
                </p>
              </div>
            </li>
          </ul>
        </el-card>
        <h1>历年销售记录</h1>
        <el-table :data="historyDataList" style="width: 100%">
          <el-table-column prop="date" label="年份">
            <template slot-scope="scope">{{scope.row.years}}</template>
          </el-table-column>
          <el-table-column prop="name" label="  销售总额（元）">
            <template slot-scope="scope">{{scope.row.totalConsume}}</template>
          </el-table-column>
          <el-table-column prop="name" label="代理折扣">
            <template slot-scope="scope">{{scope.row.discount}}</template>
          </el-table-column>
          <el-table-column prop="address" label="代理等级">
            <template slot-scope="scope">{{scope.row.level | formatLevel}}</template>
          </el-table-column>
          <el-table-column prop="name" label="销售排行">
            <template slot-scope="scope">{{scope.row.ranking}}</template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="购买记录" name="second">
        <el-table style="width: 100%" :data="orderList">
          <el-table-column prop="date" label="购买时间">
            <template slot-scope="scope">{{scope.row.createTime}}</template>
          </el-table-column>
          <el-table-column prop="name" label="付款金额">
            <template slot-scope="scope">{{scope.row.payAmount}}</template>
          </el-table-column>
          <el-table-column prop="name" label="状态">
            <template slot-scope="scope">{{scope.row.status | formatStatus}}</template>
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="scope">
              <p>
                <el-button size="mini" @click="handleShowProduct(scope.$index, scope.row)">查看详情</el-button>
              </p>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination background="" @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="total, sizes,prev, pager, next,jumper" :page-size="orderListQuery.pageSize" :page-sizes="[5,10,15]" :current-page.sync="orderListQuery.pageNum" :total="orderListTotal"></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { getAgentBaseInfo, getAgentOrderList } from "@/api/agent";

const defaultBaseInfoQuery = {
  agentId: "",
  merchantId: 1
};

const defaultOrderListQuery = {
  pageNum: 1,
  pageSize: 5,
  agentId: "",
  merchantId: 1
};

export default {
  data() {
    return {
      activeName: "first",
      listLoading: true,
      baseInfoQuery: Object.assign({}, defaultBaseInfoQuery),
      orderListQuery: Object.assign({}, defaultOrderListQuery),
      baseInfo: null,
      orderList: null,
      historyDataList: null,
      orderListTotal: null,
      orderListLoading: true,
      tableData: null
    };
  },
  created() {
    this.getBaseInfo();
    this.getOrderList();
  },
  filters: {
    formatStatus(status) {
      if (status === "0") {
        return "待付款";
      } else if (status === "1") {
        return "待发货";
      } else if (status === "2") {
        return "已发货";
      } else if (status === "3") {
        return "已关闭";
      } else if (status === "4") {
        return "已退款";
      } else if (status === "5") {
        return "已完成";
      } else {
        return "/";
      }
    },
    formatLevel(value) {
      if (value === "1") {
        return "一级代理商";
      } else if (value === "2") {
        return "二级代理商";
      } else if (value === "3") {
        return "三级代理商";
      } else if (value === "0") {
        return "特殊代理商";
      } else {
        return "/";
      }
    }
  },

  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    getBaseInfo() {
      this.baseInfoQuery.agentId = this.$route.query.id;
      getAgentBaseInfo(this.baseInfoQuery).then(response => {
        this.baseInfo = response.data;
        this.historyDataList = response.data.historyDataList;
        console.log(response.data.historyDataList, 22222);
      });
    },
    getOrderList() {
      this.orderListLoading = true;
      this.orderListQuery.agentId = this.$route.query.id;
      getAgentOrderList(this.orderListQuery).then(response => {
        this.orderListLoading = false;
        this.orderList = response.data.list;
        this.orderListTotal = response.data.total;
      });
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.app-container {
  background: #fff;
  min-height: 500px;

  .box-card {
    ul {
      display: flex;
      justify-content: space-between;

      li {
        width: 30%;

        .title {
          width: 100px;
          display: inline-block;
        }
      }
    }
  }

  h1 {
    font-size: 16px;
  }
}
</style>
